<template>
  <div class="dashboard-container">
    <el-divider></el-divider>
    <div class="one-line">
      <el-tag class="tag-style" size="large">{{ bugInfo.id }}</el-tag>
      <span style="margin-left: 30px;color: #606266">{{ bugInfo.title }}</span>
    </div>
    <el-divider></el-divider>
    <div v-if="userInfo.id === bugInfo.handlerId">
      <el-form>
        <el-row>
          <el-col :span="7">
            <el-form-item label="缺陷状态：">
              <el-select class="select-style" v-model="bugStatus" placeholder="选择流程节点" @change="selectBugStatus" size="mini">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="角色：">
              <el-select class="select-style" v-model="role" @change="selectRole" placeholder="选择角色" size="mini">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item  label="处理人：">
              <el-select class="select-style" v-model="handler" placeholder="选择处理人" size="mini">
                <el-option
                  v-for="item in handlerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="!showRefuse" :span="2">
            <el-button class="proButton" @click="submitProcessor">提交</el-button>
          </el-col>
        </el-row>
        <div v-if="showRefuse">
          <el-form-item label="拒绝类型：">
            <el-select v-model="refuse" placeholder="请选择拒绝的类型" size="mini">
              <el-option
                v-for="item in refuseOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="拒绝理由：">
            <el-input
              style="width: 50%;"
              type="textarea"
              :autosize="{ minRows: 2}"
              placeholder="追加描述"
              v-model="refuseTextarea">
            </el-input>
            <el-button style="margin-left: 25vh" class="proButton" @click="refuseProcessor">提交</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">缺陷描述</el-menu-item>
        <el-menu-item index="2">缺陷属性</el-menu-item>
        <el-menu-item index="3">操作历史</el-menu-item>
      </el-menu>
    </div>
    <div v-if="activeIndex === '1'">
      <div class="margin-top-30px">
        <p class="title-blue">缺陷描述</p>
        <el-divider></el-divider>
        <div style="min-height: 50px;">
          <p class="text-color">{{ bugInfo.bugDescription }}</p>
          <div>
            <p v-for="(item,index) in describes" :key="index" class="text-color">[{{ item.submitterId }}]&nbsp;&nbsp;追加描述：{{ item.description }}</p>
          </div>
        </div>
        <el-row>
          <el-col :span="18">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1}"
              placeholder="追加描述"
              v-model="textarea">
            </el-input>
          </el-col>
          <el-col :offset="2" :span="3">
            <el-button v-if="projectInfo.role != 2" class="proButton" @click="addDescription">提交</el-button>
            <el-button v-if="projectInfo.role == 2" class="proButton" @click="refreshDescription">刷新</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="margin-top-30px">
        <p class="title-blue">缺陷附件</p>
        <el-divider></el-divider>
        <div class="text-color">
          <p v-for="(file,index) in files" :key="index"><svg-icon icon-class="doument"></svg-icon><span class="margin-left-10px">{{ file.fileName }}</span><a @click="downloadFile(file)" class="title-blue margin-left-10px">下载</a></p>
        </div>
      </div>
    </div>
    <div v-if="activeIndex === '2'">
      <el-descriptions class="margin-top-30px" :column="2">
        <template slot="extra">
          <!--          <el-button type="primary" size="small">操作</el-button>-->
        </template>
        <el-descriptions-item label="提交者">{{ bugInfo.submitterName }}</el-descriptions-item>
        <el-descriptions-item label="缺陷类别">{{ bugInfo.bugCategory }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ bugInfo.createTime }}</el-descriptions-item>
        <el-descriptions-item label="严重等级">{{ bugInfo.ponderance }}</el-descriptions-item>
        <el-descriptions-item label="项目模块">{{ bugInfo.moduleName }}</el-descriptions-item>
        <el-descriptions-item label="出现频率">{{ bugInfo.frequency }}</el-descriptions-item>
        <el-descriptions-item label="当前状态">{{ bugStatusOption[bugInfo.bugStatus] }}</el-descriptions-item>
        <el-descriptions-item label="缺陷优先级">{{ bugInfo.priority }}</el-descriptions-item>
        <el-descriptions-item label="关联用例">{{ bugInfo.exampleName }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div v-if="activeIndex === '3'">
      <history-table v-bind:bugId="bugInfo.id"></history-table>
    </div>
    <el-dialog
      :visible.sync="centerDialogVisible"
      width="30%"
      :modal="false"
      :show-close="false"
      center>
      <el-result icon="success" title="修改成功">
        <template slot="extra">
          <el-button type="primary" size="medium" @click="clickSure">确定</el-button>
        </template>
      </el-result>
    </el-dialog>
  </div>
</template>

<script>
  import HistoryTable from '@/views/proDetails/bugManage/historyTable/index'
  import { getNextBugStatus, getNextHandler } from '@/utils/process-selection'
  import {
    additionalDescription, getAdditionalDescription, getFiles,
    inquirerByProjectIdAndRole,
    modifyNextHandler,
    refuseModifyNextHandler
  } from '@/api/bug'
  import { mapGetters } from 'vuex'
  export default {
    name: 'bugInformation',
    components: { HistoryTable },
    props:{
      bugInfo:{
        type: Object,
        require: true
      }
    },
    computed: {
      ...mapGetters(['projectId','userInfo','projectInfo'])
    },
    data() {
      return {
        bugStatus: '',                 //状态值
        statusOptions: [],             //状态选择组
        role: '',                      //角色值
        roleOptions: [],               //角色选择组
        handler: '',                   //角色值
        handlerOptions: [],            //角色选择组
        activeIndex: '1',
        textarea: '',                  //追加描述
        bugStatusOption: ['新建','分配','打开','已解决','关闭','重新打开','拒绝'],
        describes: [],                 //追加描述的展示列表集合
        centerDialogVisible: false,   //提交成功后显示的弹窗
        showRefuse: false,            //绑定是否显示拒绝相关表单的值
        files: [],                    //附件集合
        refuseTextarea: '',           //拒绝理由绑定的值
        refuse: '',                   //拒绝类型值
        refuseOptions: [{             //拒绝类型选择组
          value: '无法修复',
          label: '无法修复'
        },{
          value: '重复问题',
          label: '重复问题'
        },{
          value: '无法重现',
          label: '无法重现'
        },{
          value: '不是缺陷',
          label: '不是缺陷'
        },{
          value: '其他',
          label: '其他'
        }],
      }
    },
    methods:{
      handleSelect(key){
        this.activeIndex = key
      },
      getNextBugStatusOptions(){
        this.statusOptions = getNextBugStatus(this.bugInfo.bugStatus);
      },
      //选择了bug的状态后执行的方法
      selectBugStatus(val){
        if (val === '6'){
          this.showRefuse = true
        }
        this.roleOptions = getNextHandler(this.bugInfo.bugStatus,val)
      },
      //选择了角色后动态获取处理人
      selectRole(val){
        let params = {'role':val,'proId': this.projectId}
        inquirerByProjectIdAndRole(params).then(res =>{
          this.handlerOptions = []
          this.handler = ''
          for (let i = 0; i < res.data.length; i++){
            this.handlerOptions[i] = { value:res.data[i].userId,label: res.data[i].userName}
          }
        })
      },

      //选择完处理人后提交的方法
      submitProcessor(){
        let params = {'id':this.bugInfo.id,'handlerId':this.handler,'bugStatus':this.bugStatus,'submitterId':this.userInfo.id }
        modifyNextHandler(params).then(res =>{
          this.centerDialogVisible = true
        })
      },//当状态是拒绝时的提交方法
      refuseProcessor(){
        let params = {'id':this.bugInfo.id,'handlerId':this.handler,'bugStatus':this.bugStatus,'submitterId':this.userInfo.id }
        this.$set(params,'refuseType',this.refuse)
        this.$set(params,'refuseReason',this.refuseTextarea)
        refuseModifyNextHandler(params).then(res =>{
          console.log(res)
          this.centerDialogVisible = true
        })
      },
      //点击确定后的方法
      clickSure(){
        this.$router.go(0)
      },
      //添加追加描述的方法
      addDescription(){
        let params = {'bugId':this.bugInfo.id, 'submitterId':this.userInfo.id, 'description':this.textarea}
        additionalDescription(params).then(res =>{
          this.$message(res.msg)
          this.textarea = ''
          this.getDescription()
        })
      },
      //获取追加描述的方法
      getDescription(){
        getAdditionalDescription(this.bugInfo.id).then(res =>{
          if (res.msg === '无'){
            return;
          }
          this.describes = res.data
        })
      },
      //获取文件集合
      getFiles(){
        getFiles(this.bugInfo.id).then(res =>{
          if (res.data.length === 0){
            return;
          }else{
            this.files = res.data
          }
        })
      },
      //下载附件
      downloadFile(file){
        // let filePath = encodeURI(file.fileLocalPath)
        // let filePath = 'http://101.35.123.53/document/231119009许世烽-学党史.docx'
        // console.log(filePath)
        window.open(file.fileAccessPath,'_blank')
      },
      //刷新追加描述
      refreshDescription(){
        this.getDescription()
        this.$message({type: 'success',message: '刷新成功'})
      }
    },
    mounted(){
      this.getDescription()
      this.getNextBugStatusOptions()
      this.getFiles()
    }
  }
</script>

<style scoped>
  .dashboard-container {
    margin-top: -24px;
  }

  .margin-left-10px {
    margin-left: 10px;
  }

  .margin-top-30px {
    margin-top: 30px;
  }

  .title-blue {
    color: #0293f9;
    font-size: 90%;
  }

  .text-color {
    color: #606266;
  }

  /* el-divider 修改高度&虚线效果 */
  .margin-top-30px .el-divider--horizontal {
    margin: 8px 0;
  }

  .tag-style {
    margin-left: 30px;
    background-color: #E6A23C;
    color: #ffffff
  }

  .one-line {
    height: 50px;
    background-color: #f1f4f7;
    line-height: 50px
  }

  .select-style{
    width: 50%;
  }
</style>
